<template>
	<view>
		<!-- 修改内容 -->
		<u-modal v-model="showModal" width="70%" title="设置服务地址" confirm-text="确认设置" :mask-close-able="false"
			:show-cancel-button="true" @confirm="confirm" :cancel-style="cancelStyle" :confirm-style="cancelStyle">
			<view class="slot-content change-http">
				<view style="padding: 0 20rpx;">
					<u-field v-model="form.baseUrl" label="服务地址:" placeholder="请填写服务地址" :field-style="fieldStyle"
						clearSize="14" labelWidth="60">
					</u-field>
					<u-field v-model="form.port" label="服务端口:" placeholder="请填写服务端口" :field-style="fieldStyle"
						clearSize="14" labelWidth="60">
					</u-field>
					<view
						style="display:flex;align-items: center;padding: 10rpx 12rpx;border-bottom: 1px solid rgba(0,0,0,0.05);"
						@click="showPicker = true">
						<view style="font-size: 14rpx;width: 70rpx;font-weight: bold;">默认仓库:</view>
						<view style="display:flex;align-items: center;font-size: 14rpx;font-weight: bold;">
							{{ formData.stockName || '请选择默认仓库' }}
						</view>
					</view>
					<view style="display:flex;align-items: center;padding: 10rpx 12rpx;align-items: flex-start;">
						<view style="font-size: 14rpx;width: 70rpx;font-weight: bold;">布局图:</view>
						<view style="width: 300rpx;height: 200rpx; position: relative;">
							<image v-if="vuex_setting.imageAddress" :src="vuex_setting.imageAddress" @tap="previewImage"
									style="width: 100%;height: 100%;border:1px dashed gray"></image>
							<image v-else src="@/static/images/uploadImg.png" @click="uploadImage"
									style="width: 100%;height: 100%;"></image>
							<u-icon v-if="vuex_setting.imageAddress" name="close-circle" color="#373737" @click="deletePic" style="position: absolute; top:0;right:0;"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-modal>
		<!--仓库选择-->
		<u-select v-model="showPicker" :list="range" :default-value="defaultValue" safe-area-inset-bottom
			@confirm="confirmPicker"></u-select>
	</view>
</template>

<script>
	import {
		baseURL
	} from "@/api/index.js";
	import {
		getBasstockList,
		saveBillBoardBaseSetting
	} from '@/api/business.js'

	export default {
		name: "change-http",
		data() {
			return {
				showModal: false,
				showPicker: false,
				defaultValue: [0],
				range: [],
				form: {
					baseUrl: "",
					port: ""
				},
				formData: {
					stockName: "",
					stockId: "",
				},
				action: baseURL + '/goods/billBoard/image/upload',
				checked: false,
				baseURL,
				// uploadImg: "",
			}
		},
		computed: {
			fieldStyle() {
				return {
					fontSize: '14rpx',
					height: '20rpx',
					lineHeight: '20rpx',
					margin: 'auto',
					fontWeight: 600
				}
			},
			cancelStyle() {
				return {
					height: '60rpx',
					lineHeight: '60rpx',
					fontSize: '20rpx'
				}
			}
		},
		methods: {
			show() {
				this.form = {
					baseUrl: this.$u.deepClone(this.vuex_http.baseUrl),
					port: this.$u.deepClone(this.vuex_http.port)
				}
				this.checked = this.$u.deepClone(this.vuex_config.showIndexBanner);
				this.getBasstockListApi();
				this.showModal = true;
			},
			confirm() {
				if (!this.form.baseUrl) {
					this.$cu.toast('服务地址不能为空.');
					this.showModal = true;
					return
				}
				if (!this.form.port) {
					this.$cu.toast('服务端口不能为空.');
					this.showModal = true;
					return
				}
				this.$u.vuex('vuex_http', this.form);
				this.$u.vuex('vuex_config', {
					showIndexBanner: this.checked
				});
				this.$u.vuex('vuex_setting.stockId', this.formData.stockId)
				uni.$u.toast('配置成功，配置服务地址重启后生效.');
				this.saveBillBoardBaseSettingApi();
				setTimeout(() => {
					// #ifdef APP-PLUS
					uni.hideLoading();
					plus.runtime.restart();
					// #endif
				}, 1500)
			},
			confirmPicker(e) {
				this.formData.stockName = e[0].label;
				this.formData.stockId = e[0].value;
				// this.$u.vuex('vuex_setting.stockId', e[0].value);
			},
			// 预览图片
			previewImage() {
				let _this=this;
				console.log('预览图片',this.vuex_setting.imageAddress)
				var current = this.vuex_setting.imageAddress.split(",");
				uni.previewImage({
					current: '',
					urls: _this.vuex_setting.imageAddress
				})
			},
			// 删除图片
			deletePic() {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片?',
					success: res => {
						console.log('---------',res)
						if(res.confirm) {
							this.$u.vuex('vuex_setting.imageAddress', '');
						}
					}
				})
			},
			uploadImage() {
				uni.chooseImage({
					count: 1, // 可选择的图片数量
					success: (res) => {
						const tempFilePaths = res.tempFilePaths
						uni.uploadFile({
							url: `${this.baseURL}/goods/billBoard/image/upload`, // 图片上传接口地址
							filePath: tempFilePaths[0],
							name: 'image', // 后端接口对应的文件字段名
							formData: {
								// 其他表单数据
							},
							success: (res) => {
								// 上传成功，处理返回的结果
								let str = JSON.parse(res.data)
								this.$u.vuex('vuex_setting.imageAddress', str.data);
								console.log('11', this.vuex_setting.imageAddress)
							},
							fail: (err) => {
								// 上传失败
								console.log('22', err)
							}
						})
					},
					fail: (err) => {
						// 选择图片失败
						console.log(err)
					}
				})
			},
			// 出库看板查询物资仓库----------------接口
			getBasstockListApi() {
				this.range = [];
				this.defaultValue = [];
				return new Promise((resolve) => {
					getBasstockList({
						current: -1,
						size: 1000,
					}).then(res => {
						if (res.retCode === 2000) {
							res.data.records.forEach((element, index) => {
								element.label = element.name;
								element.value = element.id;
								if (element.id == this.vuex_setting.stockId) {
									this.formData.stockName = element.name;
									this.defaultValue.push(index)
								}
							})
							this.range = [...this.range, ...res.data.records];
							resolve()
						}
					})
				})
			},
			// 保存/编辑基础设置信息---------接口
			saveBillBoardBaseSettingApi() {
				return new Promise((resolve) => {
					let params = {
						stockId: this.formData.stockId,
						imageAddress: this.vuex_setting.imageAddress
					}
					saveBillBoardBaseSetting(params).then(res => {
						if (res.retCode === 2000) {
							resolve()
						}
					})
				})
			}
		}
	}
</script>

<style>
	/deep/.u-model__title {
		font-weight: 600;
		font-size: 28rpx !important;
	}

	/deep/.change-http .u-label-text {
		font-size: 14rpx !important;
	}

	/deep/.uni-picker-view-content>* {
		height: 38rpx !important;
	}

	/deep/.uni-picker-view-indicator {
		height: 38rpx !important;
	}

	.wrap {
		padding: 24rpx;
	}

	.slot-btn {
		width: 341rpx;
		height: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 10rpx;
		
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}

	.pre-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.pre-item {
		flex: 0 0 48.5%;
		border-radius: 10rpx;
		height: 140rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 20rpx;
	}

	.pre-item-image {
		width: 100%;
		height: 140rpx;
	}
</style>
